<template>
<div>
  <header-nav></header-nav>

    <div class="dynamic">
      <div class="text">
          <p>豆果美食，会做饭很酷~</p>
          <span>你关注人的动态会出现在这</span>
          <span>为你推荐了一些有趣的人快关注TA们吧:</span>
      </div>
    </div>

      <div class="user" v-for="(item,index) in rfs" :key="index">
    <div class="user-img">
      <img :src="item.u.p" alt="">
      <div class="name">{{item.u.n}}</div>
      <div class="lv">LV.{{item.u.lv}}</div>
    </div>
    <div class="food-img" @click="imgu(item.item_id)">
     
      <img :src="item.img" alt="" v-if='item.video_url == ""' >
      <video :src="item.video_url" controls="controls" v-else></video>

    </div>
    <div class="Collection">
      <div class="Collection-all">
      <div class="Collection-img" v-for="value in item.collect_users" :key="value.id">
        <img :src="value.p" alt="">
      </div>
      <div class="Collection-person">
        {{item.collect_count_text}}
      </div>
      </div>
      <div class="iconfont icon-shoucangjia"></div>
    </div>
    <div class="food-name">
      <p>{{item.n}}</p>
    </div>
  </div>




 
</div>
</template>

<script>
import {getHomeFfeeds} from "../api/follow"
import headerNav from "../components/base/headerNav.vue"

export default {
  data(){
    return{
      rfs:[]
    }
  },
  methods:{
    imgu(id){
       this.$router.push({path:'/details',query: {id:id}})
      }
      
  },
  created(){
    getHomeFfeeds().then(data=>{
      this.rfs = data.result.rfs
      console.log(this.rfs);
    })
  },
    components:{
        headerNav,
       
    }
}
</script>

<style lang="less">
.dynamic{
  width: 100%;
  height: 100px;
  background-color: #FAFAFA;
  .text{
    margin-left: 16px;
    padding-top: 22px;
    p{
      font-size: 14px;
      line-height: 14px;
      color:#000000;
      margin-bottom: 14px;
    }
    span{
      display: block;
      font-size: 12px;
      line-height: 12px;
      color: #9D9D9D;
      margin-bottom: 8px;
    }
  }
}
.user{
    margin-bottom: 30px;
    width: 100%;
    .user-img{
      display: flex;
      align-items: center;
      margin-bottom:10px;
      img{
        width: 32px;
        height: 32px;
        margin-left: 13px;
        border-radius: 50%;
      }
      .name{
        margin-left: 7px;
        font-size: 12px;
        line-height: 12px;
        color: #2A2A2A;
      }
      .lv{
        margin-left: 7px;
        font-size: 8px;
        line-height: 8px;
        color: #CBA43B;
      }
    }
    .food-img{
      width: 100%;
      margin-bottom: 15px;
      img{
        background-size: cover;
       
         width: 100%;
        height: 100%;
      }
      video{
         width: 100%;
        height: 100%;
      }
     
    }
    .Collection{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:25px ;
        .Collection-all{
          display: flex;
          align-items: center;
          margin-left:13px;
          .Collection-img{
            width: 15px;
            height: 15px;
            img{
             width: 100%;
              border-radius: 50%;
            }
          }
          .Collection-person{
            margin-left: 10px;
            font-size: 10px;
            line-height: 10px;
            color: #0D0D0D;
          }
        }
        .iconfont{
          margin-right: 12px;
          font-size: 20px;
          line-height: 20px;
          color: #000000;
        }
    }
    .food-name{
      font-size: 14px;
      line-height: 18px;
      color: #292929;
       margin:0px 13px;
      display: -webkit-box;           
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;         
    overflow: hidden;
    }
  }

</style>